<template>
<!-- 采购进货单 -->
<section class="content-box">
    <div>
        <!--列表-->
        <div v-if="isshowList">
            <el-col :span="24" class="SuppC-toolbar">
                <el-form class="title">
                    <div class="cover">
                        <h2>采购进货单</h2>
                        <el-button @click="Search()" size="small" class="el-icon-search">&nbsp;查询</el-button>
                    </div>
                    <el-form-item class="cover">
                        <div class="list-img" @click="handleInvoice()">
                            <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-invoice.png" alt="" />
                            <span>发票</span>
                        </div>
                        <div class="list-img" @click="handlePay()">
                            <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-pay.png" alt="" />
                            <span>付款</span>
                        </div>
                        <el-popover ref="poverMerge" placement="bottom" width="100" trigger="hover" :visible-arrow="false">
                            <div class="item-img" @click="handleExport()" style="display:block;float:none">
                                <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-export.png" alt="" />
                                <span>导出</span>
                            </div>
                        </el-popover>
                        <div class="list-img" v-popover:poverMerge>
                            <img class="SuppC-common-icon" src="../../../../static/content/images/Common/common-more.png" alt="" />
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
            <!--列表-->
            <el-table v-if="dataList" :data="dataList" ref="multipleTable" @row-dblclick="handleEdit" tooltip-effect="dark" @selection-change="handleSelectionList" highlight-current-row v-loading="loading" element-loading-text="正在加载中" style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="A" label="单据日期" width="150" sortable>
                </el-table-column>
                <el-table-column prop="B" label="单据编号" width="150" sortable show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="C" label="单据名称" width="150" sortable>
                </el-table-column>
                <el-table-column prop="D" label="付款进度" width="120">
                </el-table-column>
                <el-table-column prop="E" label="采购金额" width="120">
                </el-table-column>
                <el-table-column prop="F" label="采购订单" width="150" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="G" label="结算方式" width="120">
                </el-table-column>
                <el-table-column prop="H" label="供应商" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="I" label="状态" width="150">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="list-img" @click="repeal(scope.$index, scope.row)">
                            <img class="common-icon" src="../../../../static/content/images/Common/common-repeal.png" alt=""/>
                        </div>
                        <div class="list-img" @click="checkflowRow(scope.$index, scope.row)">
                            <img class="common-icon" src="../../../../static/content/images/Common/common-flow.png" alt=""/>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>    
        <!--采购进货单-->
        <div v-if="isshowStock">
            <!-- 导航条 -->
            <div class="flex-top">
                <div>
                    <i class="el-icon-arrow-left back" @click="ToBack"></i>
                    <span style="font-size:20px;vertical-align:middle;margin:0 10px;">
                        采购进货单
                    </span>
                </div>
                <div class="flex">
                    <span class="wrapper cover">
                        <div style="margin:10px;overflow:hidden;">
                            <div class="list-img" @click="Save()">
                            <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
                                <img class="common-button-group" src="../../../../static/content/images/Common/common-save.png" alt=""/>
                            </el-tooltip>
                            </div>
                            <div class="list-img" @click="Submit()">
                            <el-tooltip class="item" effect="dark" content="提交" placement="bottom">
                                <img class="common-button-group" src="../../../../static/content/images/Common/common-submit.png" alt=""/>
                            </el-tooltip>
                            </div>
                        </div>
                    </span>
                </div>
            </div>
            <main class="main" style="width:1230px;">
                <div class="main-left">
                    <div v-if="DocNo">
                        <h3>单号</h3>
                        <strong>{{DocNo}}</strong>
                    </div>
                    <div>
                        <h3>日期</h3>
                        <div class="flex">
                            <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="SuppC-Money">
                        <h3>进货金额</h3>
                        <el-input type="Number" v-model='name1' placeholder="请录入付款金额"></el-input>
                        <i class="icon iconfont icon-rmb"></i>
                    </div>
                </div>
                <div class="main-right">
                    <div class="left-form">
                        <el-form label-width="70px" class="form-content">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="供应商">
                                        <el-select v-model="name1" placeholder="请选择" style="width:200px;">
                                            <el-option
                                            v-for="item in Names"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="入仓单号">
                                        <el-input v-model="name1"  style="width:200px;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="采购订单">
                                        <el-input v-model="name1"  style="width:200px;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div class="right-form">
                        <el-form label-width="100px">
                            <el-form-item label="业务描述">
                                <el-input
                                    class="Suppc-txtarea"
                                    type="textarea"
                                    :rows="3"
                                    placeholder="请输入内容"
                                    v-model="name1">
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </main>
            <div class="border-solid"></div>
            <div class="budget cover" style="width:1230px">
                <h3>进货明细</h3>  
                <table class="InHideTable" border="1" style="width:1170px;margin:0 20px;">
                    <tr>
                        <th style="width:150px;">存货编码</th>
                        <th style="width:150px;">存货名称</th>
                        <th style="width:100px;">订单数量</th>
                        <th style="width:100px;">申请入仓数量</th>    
                        <th style="width:100px;">实际入仓数</th>
                        <th style="width:100px;">进货金额</th>
                    </tr>
                    <tr v-for="(item,index) in StockDetail" :key="index">
                        <td>
                            {{item.A}}
                        </td>
                        <td>
                            {{item.B}}
                        </td>
                        <td>
                            {{item.C}}
                        </td>
                        <td>
                            {{item.D}}
                        </td>
                        <td>
                            {{item.E}}
                        </td>
                        <td>
                            {{item.F}}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">合计</td>
                        <td>{{stockPrice}}</td>
                    </tr>
                </table>
                <h3>请核销预付款</h3>
                <table class="InHideTable"  border="1" style="width:1170px;margin:0 20px;">
                    <tr>
                    <!-- <th style="width:40px;">
                        <el-checkbox v-model="checked"  @change="fpCheck($event)"></el-checkbox>
                    </th> -->
                    <th style="width:150px;">单据编号</th>
                    <th style="width:150px;">单据名称</th>
                    <th style="width:150px;">单据日期</th>
                    <th style="width:120px;">预付总额</th>
                    <th style="width:120px;">已核销</th>
                    <th style="width:120px;">剩余未核销</th>
                    <th style="width:120px;">本次核销</th>
                    </tr>
                    <tr v-for="(item,index) in WriteOff" :key="index">
                    <!-- <td><el-checkbox  class="testCheckBox"></el-checkbox></td> -->
                    <td>{{item.A}}</td>
                    <td>{{item.B}}</td>
                    <td>{{item.C}}</td>
                    <td>{{item.D}}</td>
                    <td>{{item.E}}</td>
                    <td>
                        {{item.F}}
                    </td>
                    <td>
                        <el-input type="text" :ref="index * 1 + 1" @keyup.enter.native="jump(index * 1 + 1)" placeholder="请录入" class="input-Focus white" v-model="item.G"></el-input>
                    </td>
                    </tr>
                    <tr>
                    <td colspan="6">合计</td>
                    <td>{{verification}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <!--导出询问框-->
        <el-dialog title="请选择导出的内容" :visible.sync="ExportDialog" :modal-append-to-body="false" size="tiny">
            <el-radio-group v-model="radioExport">
                <el-radio :label="1">导出模板</el-radio>
                <el-radio :label="2">导出订单明细</el-radio>
            </el-radio-group>
            <div slot="footer" class="dialog-footer cover">
                <el-button size="small" @click="Cancel">取 消</el-button>
                <el-button size="small" @click="Determine">确 定</el-button>
            </div>
        </el-dialog>
        <!--流程图-->
        <el-dialog title="流程执行情况" :visible.sync="checkflowRowVisible" :modal-append-to-body="false" align="center">
            <el-table :data="docRowView" min-height="300" header-align="center" v-loading="docViewloading" element-loading-text="拼命刷新中...">
            <el-table-column property="PlanUser" label="操作人"></el-table-column>
            <el-table-column property="StepName" label="步骤名称"></el-table-column>
            <el-table-column property="OpDate" label="时间"></el-table-column>
            <el-table-column property="OpRemark" label="审批流程"></el-table-column>
            </el-table>
        </el-dialog>
        <!--查询-->
        <el-dialog title="查询" :visible.sync="dialogSearchVisible" :modal-append-to-body="false" size="tiny">
            <el-form :model="Searchform" class="Searform">
                <el-form-item label="单据日期" :label-width="formLabelWidth">
                <el-date-picker type="date" v-model="Searchform.StartDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
                至&nbsp;<el-date-picker type="date" v-model="Searchform.EndDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="采购金额" :label-width="formLabelWidth">
                <el-input v-model.number.trim="Searchform.StartMoney" auto-complete="off" style="width:120px;"></el-input>
                至&nbsp;<el-input v-model.number.trim="Searchform.EndMoney" auto-complete="off" style="width:120px;"></el-input>
                </el-form-item>
                <el-form-item label="付款进度" :label-width="formLabelWidth">
                <el-input v-model.number.trim="Searchform.StartMoney" auto-complete="off" style="width:120px;"></el-input>
                至&nbsp;<el-input v-model.number.trim="Searchform.EndMoney" auto-complete="off" style="width:120px;"></el-input>
                </el-form-item>
                <el-form-item label="单据编号" :label-width="formLabelWidth">
                <el-input v-model="Searchform.DocNo" style="width:262px;" placeholder="请输入关键字查询"></el-input>
                </el-form-item>
                <el-form-item label="结算方式" :label-width="formLabelWidth">
                <el-select v-model="Searchform.DocStatus" style="width:262px;" placeholder="请选择">
                    <el-option value="" label="全部">全部</el-option>
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="供应商" :label-width="formLabelWidth">
                <el-input v-model="Searchform.Title" style="width:262px;"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                <el-select v-model="Searchform.DocStatus" style="width:262px;" placeholder="请选择">
                    <el-option value="" label="全部">全部</el-option>
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer cover">
                <el-button size="small" @click="Reset">重 置</el-button>
                <el-button size="small" @click="Query">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</section>
</template>
<script>
export default {
    name: "PurchaseImport",
    data() {
        return {
            docRowView: [{
                    PlanUser: "杨晓莉",
                    StepName: "提交",
                    OpDate: "2018/1/25 16:25:55",
                    OpRemark: ""
                },
                {
                    PlanUser: "杨晓莉",
                    StepName: "提交",
                    OpDate: "2018/1/25 16:25:55",
                    OpRemark: ""
                },
                {
                    PlanUser: "杨晓莉",
                    StepName: "提交",
                    OpDate: "2018/1/25 16:25:55",
                    OpRemark: ""
                },
                {
                    PlanUser: "杨晓莉",
                    StepName: "提交",
                    OpDate: "2018/1/25 16:25:55",
                    OpRemark: ""
                }
            ],
            loading: false,
            isshowList: true,
            isshowStock: false,
            isshowInvoice: false,
            checkflowRowVisible: false,
            docViewloading:false,
            checked:false,
            ExportDialog:false,//询问窗口
            radioExport: 1,
            name1: '',
            input2: '',
            DocNo: 'SDK1009207888',
            DocDate: '',
            formLabelWidth: '70px',
            Searchform: {
                A: '',
                B: '',
                C: '',
                D: '',
                E: '',
                F: '',
                G: '',
                H: '',
                I: '',
                J: '',
                K: '',
            },
            dialogSearchVisible: false,
            Names: [{
                label: '1',
                value: "1"
            }, {
                label: '1',
                value: "2"
            }],
            //核销预付款
            WriteOff: [{
                A: "YF180100010",
                B: "预付款",
                C: "2018-01-31",
                D: 5363,
                E: 0,
                F: 5363,
                G: 5363.0
            }],
            Settlement: [{
                value: "1",
                label: "入仓单结算",
            }, {
                value: "2",
                label: "发票结算",
            }], //结算方式
            settle: '',
            StockDetail: [{
                A: "YF0015",
                B: "直流电机",
                C: 4,
                D: 4,
                E: 137.00,
                F: 137.00,
            }, {
                A: "YF0015",
                B: "直流电机",
                C: 4,
                D: 4,
                E: 137.00,
                F: 137.00,
            }, {
                A: "YF0015",
                B: "直流电机",
                C: 4,
                D: 4,
                E: 137.00,
                F: 137.00,
            }, {
                A: "YF0015",
                B: "直流电机",
                C: 4,
                D: 4,
                E: 137.00,
                F: 137.00,
            }],
            //发票明细
            InvoiceDetail: [{
                A: "CH18020014",
                B: "采购进货",
                C: "10018",
                D: "500ML统一阿萨姆奶茶",
                E: 1500,
                F: 1500,
                G: 1500,
                H: 2.97,
                I: 6,
                J: 3.14467,
                K: 4455.00,
                L: 262.00,
                M: 4717.00
            }, {
                A: "CH18020014",
                B: "采购进货",
                C: "10017",
                D: "500ML统一冰红茶",
                E: 300,
                F: 300,
                G: 1500,
                H: 1.97,
                I: 6,
                J: 2.08333,
                K: 4455.00,
                L: 34.00,
                M: 625.00
            }, {
                A: "CH18020014",
                B: "采购进货",
                C: "10018",
                D: "500ML统一阿萨姆奶茶",
                E: 1500,
                F: 1500,
                G: 1500,
                H: 2.97,
                I: 6,
                J: 3.14467,
                K: 4455.00,
                L: 262.00,
                M: 4717.00
            }],
            options: [
                {
                value: "1",
                label: "黄金糕"
                },
                {
                value: "2",
                label: "双皮奶"
                }
            ],
            options2: [
                {
                value: "1",
                label: "黄金糕"
                },
                {
                value: "2",
                label: "双皮奶"
                }
            ],
            dataList: [{
                A: '2016-05-03',
                B: 'CH18030007',
                C: '采购进货',
                D: '50%',
                E: 15000,
                F: 'CR180307045',
                G: '发票结算',
                H: '广州品冠电子有限公司',
                I: '待审核',
            }, {
                A: '2016-05-03',
                B: 'CH18030007',
                C: '采购进货',
                D: '50%',
                E: 15000,
                F: 'CR180307045',
                G: '发票结算',
                H: '广州品冠电子有限公司',
                I: '待审核',
            }, {
                A: '2016-05-03',
                B: 'CH18030007',
                C: '采购进货',
                D: '50%',
                E: 15000,
                F: 'CR180307045',
                G: '发票结算',
                H: '广州品冠电子有限公司',
                I: '待审核',
            }, {
                A: '2016-05-03',
                B: 'CH18030007',
                C: '采购进货',
                D: '50%',
                E: 15000,
                F: 'CR180307045',
                G: '发票结算',
                H: '广州品冠电子有限公司',
                I: '待审核',
            }],
        }
    },
    methods: {
        //流程图
        checkflowRow() {
            this.checkflowRowVisible = true;
        },
        //采购进货单编辑页面
        handleEdit(row) {
            this.isshowStock = true;
            this.isshowList = false;
            this.$router.push({
                path:'/PurchaseImport',
                query:{
                    Edit:true
                }
            })
            console.log(row, 'row');
        },
        //生成发票页面
        handleInvoice() {
            this.$router.push({
                path:'/PurchaseInvoice',
                query:{
                    News:true
                }
            })
        },
        //保存
        Save() {},
        //提交
        Submit() {},
        ToBack() {
            this.isshowList = true,
                this.isshowStock = false,
                this.isshowInvoice = false
        },
        //多选
        handleSelectionList(val) {
            let arr = [];
            this.multipleSelection = val;
            this.multipleSelection.forEach((item, index) => {
                console.log(item.date, 'item');
                arr.push(item.date)
            })
            const arrjoin = arr.join();
            console.log(arrjoin);
        },
        handleExport() {
            this.ExportDialog = true;
        },
        //弹框取消按钮
        Cancel() {
            this.ExportDialog = false;
        },
        Determine() {
            this.ExportDialog = false;
            console.log(this.radioExport, "this.radioExport");
        },
        //付款单
        handlePay(){
          this.$router.push({
              path:'/PurchasePayment',
              query:{
                  isAdPay:false
              }
          })
        },
        // 撤销
        repeal(index, row) {
            this.$confirm("确认撤销吗?", "提示", {
                type: "warning"
            }).then(() => {
                this.$message({
                    type: "success",
                    message: "撤销成功"
                });
            });
        },
        jump(index) {
            if (this.$refs[index + 1]) {
                this.$refs[index + 1][0].$el.getElementsByTagName('input')[0].focus();
            }
        },
        async Query() {
            this.dialogSearchVisible = false;
        },
        Search() {
            this.dialogSearchVisible = true;
            console.log(this.isshowInvoice, 'isshowInvoice');
            console.log(this.dialogSearchVisible, 'this.dialogSearchVisible')
        },
        Reset() {
            this.Searchform = {
                A: '',
                B: '',
                C: '',
                D: '',
                E: '',
                F: '',
                G: '',
                H: '',
                I: '',
                J: '',
                K: '',
            };
        },
    },
    computed: {
        //本次核销
        verification() {
            let sum = 0;
            this.WriteOff.forEach(item => {
                sum += Number(item.G);
            })
            return sum;
        },
        //不含税金额
        NotaxAmount() {
            let sum = 0;
            this.StockDetail.forEach(item => {
                sum += Number(item.E);
            })
            return sum;
        },
        //价税总额
        stockPrice() {
            let sum = 0;
            this.StockDetail.forEach(item => {
                sum += Number(item.F);
            })
            return sum;
        },
        //发票 总数量=》合计
        InvoicetotalNumber() {
            let sum = 0;
            this.InvoiceDetail.forEach(item => {
                sum += Number(item.E);
            })
            return sum;
        },

        //发票 未开票数量
        NotInvoiceNum() {
            let sum = 0;
            this.InvoiceDetail.forEach(item => {
                sum += Number(item.F);
            })
            return sum;
        },
        //发票 本次开票数量
        InvoiceNum() {
            let sum = 0;
            this.InvoiceDetail.forEach(item => {
                sum += Number(item.G);
            })
            return sum;
        },
        //发票 不含税金额=》合计
        InvoiceNotaxAmount() {
            let sum = 0;
            this.InvoiceDetail.forEach(item => {
                sum += Number(item.K);
            })
            return sum;
        },
        //发票 税金=》合计
        InvoicetaxAmount() {
            let sum = 0;
            this.InvoiceDetail.forEach(item => {
                sum += Number(item.L);
            })
            return sum;
        },
        //发票 价税总额=》合计
        InvoicetaxTotal() {
            let sum = 0;
            this.InvoiceDetail.forEach(item => {
                sum += Number(item.M);
            })
            return sum;
        }
    }
}
</script>
<style scoped lang="scss">
@import "../../../common/css/index.css";
.toolbar h2 {
    line-height: 36px;
    margin: 0 10px 0 0;
}

.toolbar .title {
    display: inline-flex;
    line-height: 5px;
    width: 100%;
    justify-content: space-between;
}

.main-left {
    padding: 1vw 1vw;
}

.main-left h3 {
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
}

.left-form,
.right-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-table .cell {
    padding: 0 0;
}

.common-icon {
    line-height: 24px;
    float: none
}
</style>

